<template>
  <div>
    <el-container style="width: 100%; height: 100vh; ">
      <!--登录界面侧边栏-->
      <el-aside width="400px">
        <!--登录Logo-->
        <img class="iLogo" src="https://image.ibear.top/favicon.ico">
        <!--欢迎语句-->
        <p class="iFont">
          欢迎登录你的BLOG
        </p>
      </el-aside>

      <!--登录主体-->
      <el-main>
        <div>
          <h1 style="font-size: 30px;">登录</h1>
        </div>

        <el-form status-icon :model="loginForm" ref="loginForm" :rules="rules" size="normal" class="demo-loginForm">
          <el-form-item prop="username">
            <el-input prefix-icon="el-icon-user-solid" v-model="loginForm.username" placeholder="请输入您的用户名"></el-input>
          </el-form-item>
          <el-form-item prop="password">
            <el-input prefix-icon="el-icon-lock" v-model="loginForm.password" type="password" show-password
                      placeholder="请输入您的密码">
            </el-input>
          </el-form-item>

          <!--验证码-->
          <el-form-item>
            <div style="display: flex">
              <el-input prefix-icon="el-icon-key" v-model="loginForm.validCode" style="width: 170px"
                        placeholder="请输入验证码">
              </el-input>
              <ValidCode @input="createValidCode"/>
            </div>

          </el-form-item>

          <el-form-item>
            <el-button type="danger" @click="login('loginForm')" style="width: 300px">登录</el-button>
            <p style="margin-top: 30px">
              <el-link type="success" :underline="false" style="font-size: 12px" @click="toRegister">没有账号？点击注册！
              </el-link>
            </p>
          </el-form-item>


        </el-form>

      </el-main>
    </el-container>
  </div>
</template>


<script>
import request from "@/utils/request";
import ValidCode from "@/components/ValidCode";

export default {
  name: "Login",
  components: {ValidCode},
  data() {
    return {
      loginForm: {},
      rules: {
        username: [
          {required: true, message: "请输入用户名", trigger: blur()},
          {min: 3, max: 15, message: "长度为3-15位字符", trigger: blur()}
        ],
        password: [
          {required: true, message: "请输入密码", trigger: blur()},
          {min: 7, max: 12, message: "长度为7-12位字符", trigger: blur()}
        ],
      },
      ValidCode: '',
    }
  },


  methods: {
    //验证码功能
    createValidCode(data) {
      this.validCode = data;
    },
    //登录功能
    login() {
      this.$refs["loginForm"].validate((valid) => {

        //验证码校验
        if (valid) {
          if (!this.loginForm.validCode) {
            this.$message.error("请填写验证码")
            return
          }
          if (this.loginForm.validCode.toLowerCase() !== this.validCode.toLowerCase()) {
            this.$message.error("验证码错误")
            return
          }


          request.post("/user/login", this.loginForm).then(res => {
            if (res.code === '0') {
              this.$message({
                type: "success",
                message: "登录成功"
              })
              sessionStorage.setItem("user", JSON.stringify(res.data)) //缓存用户信息
              this.$router.push("/") //登录成功则跳转主页
            } else {
              this.$message({
                type: "error",
                message: res.msg
              })
            }
          })
        }
      });
    },

    toRegister() {
      this.$router.push("/register") //跳转注册界面
    }
  }
}
</script>

<style scoped>
.el-aside {
  background-color: indianred;
  color: #333;
  text-align: center;
  line-height: 100px;
}

.el-main {
  /*background-color: #E9EEF3;*/
  color: #333;
  text-align: center;
  line-height: 300px;
}

.iFont {
  font-size: 20px;
  color: whitesmoke;
  font-family: "Arial Black";
}

.iLogo {
  height: 10%;
  margin: 130px auto;
}

.demo-loginForm {
  max-width: 300px;
  margin: 0 auto;
}

/*.allCenter {*/
/*  margin: auto;*/
/*}*/
</style>